<template>
  <div>
    <el-dialog v-model="showDialog" title="文件上传" width="40%" center>
      <el-upload drag class="upload-demo" method="post" :action="actionUrl" :on-error="handleError" :on-success="handleSuccess" :headers="headers">
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <div class="el-upload__text">将文件拖拽到这里 或者<em>点击这里上传</em></div>
        <template #tip>
          <div class="el-upload__tip"></div>
        </template>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { isNotEmpty } from '@/utils/validate'
import { getToken } from '@/utils/cookie'
import { ElMessage } from 'element-plus'
import { OpenMessage } from '@/utils'

onMounted(() => {})

// 声明新增成功事件
const emits = defineEmits(['success'])

// 控制弹框打开与关闭
const showDialog = ref(false)

// 上传文件地址
const actionUrl = import.meta.env.VITE_APP_BASE_API + '/file'

// 设置上传的请求头
const headers = {
  XiuMuToken: getToken(),
}

function handleRemove(file, uploadFiles) {
  console.log(file, uploadFiles)
}

function handlePreview(uploadFile) {
  console.log(uploadFile)
}

function handleError(error, uploadFile, uploadFiles) {
  uploadFiles.pop()
  ElMessage.error('网络似乎不通？')
}
function handleSuccess(resp, uploadFile, uploadFiles) {
  if (resp.code !== 200) {
    uploadFiles.pop()
    ElMessage.error(resp.msg)
  } else {
    OpenMessage.openElMessage(true, resp.msg, resp.operateType)
    emits('success')
  }
}

/**
 * 弹框的打开与关闭
 */
function switchDialog() {
  showDialog.value = true
}

defineExpose({ switchDialog })
</script>

<style lang="scss" scoped>
.menu-tree {
  border-right: 3px solid var(--el-color-primary-light-7);
}
</style>
